Los métodos que ofrece JavaScript para acceder al DOM pueden clasificarse en dos grupos: Los que devuelven un único elemento cada vez, y por lo tanto permiten trabajar directamente con ese elemento sin tener que hacer un trabajo de selección o filtrado previo. Y los que devuelven un conjunto de elementos, que son llamados colección de objetos. En este segundo caso para poder acceder y modificar alguno (o todos) de los elementos que componen la colección tendremos que recorrerlos usando algún tipo de bucle, o métodos relacionados con los bucles.
En el primer grupo tenemos el método del documento getElementById(), que siempre devuelve un solo elemento. Incluso en el caso de que exista más de un elemento con el mismo id en el documento (caso que no validaría nuestro documento según los estándares de W3C) este método devolvería la primera aparición de ese id en el documento.
Y en el segundo tenemos varios métodos que siempre nos van a devolver una colección de objetos, aún en el caso de que solo exista un único elemento de ese tipo en el documento. En esta categoría tenemos los métodos getElementsByTagName(), getElementsByClassName(), getElementsByName(). Que nos devuelven, respectivamente, todos los elementos con la misma etiqueta HTML, todos los elementos con la misma clase CSS, o todos los elementos con el mismo atributo name.
Estos métodos no son exclusivamente métodos del documento, también pueden aplicarse a elementos concretos del DOM. De forma que los podemos usar para seleccionar todos los párrafos del documento (en el primer caso) o únicamente los párrafos contenidos en un determinado elemento (article, section, div...)
Una vez aplicado uno de estos métodos sobre el documento tendremos una colección de datos que podemos iterar con un bucle para modificar su contenido.
En el siguiente botón definimos una función que seleccione todos los párrafos del documento y les aplique la clase llamada "texto".
Para recorrer el conjunto podemos usar un bucle de tipo for, o de tipo for ...of:
Modo for
function seleccionaParrafos() {
let parrafos = document.getElementsByTagName('p');
for (let i=0; i < parrafos.length; i++) {
parrafos[i].classList.toggle('texto');
}
}
Modo for of
function seleccionaParrafos() {
let parrafos = document.getElementsByTagName('p');
for (let parrafo of parrafos) {
parrafo.classList.toggle('texto');
}
}
El siguiente botón solo aplicará la clase "fondo" a los párrafos que se encuentran dentro del contenedor con id="resaltado"
function resaltaFondo() {
let bloque = document.getElementById('resaltado');
let parrafos = bloque.getElementsByTagName('p');
for (let parrafo of parrafos) {
parrafo.classList.toggle('fondo');
}
}
JavaScript incorpora dos métodos que permiten seleccionar elementos del DOM usando expresiones idénticas a las que usamos para definir selectores en CSS. El primero de ellos devuelve un único selector, con el que podemos trabajar directamente. Y el segundo devuelve una colección de selectores, por la que tendremos que iterar de forma parecida a como lo hemos hecho antes para acceder a sus elementos.
Este método devuelve siempre el primer elemento del DOM que coincide con la expresión pasada en el parámetro, y permite trabajar con él.
Por ejemplo, para seleccionar el elemento con id = resaltado hacemos esto: let contenido = document.querySelector('#resaltado');
Si queremos seleccionar el contenedor: let contenido = document.querySelector('.contenedor');
Para seleccionar el primer párrafo dentro del contenedor: let contenido = document.querySelector('.contenedor > p');
En general, podemos usar dentro de los paréntesis cualquier expresión que usamos para construir un selector CSS, teniendo en cuenta que únicamente afectará al primer elemento encontrado en el DOM que coincida con la expresión.
Este es un método disponible tanto para el documento, como para los elementos. Si hacemos document.querySelector('.parrafo') nos devuelve el primer elemento del documento con la clase párrafo. Pero si lo hacemos así document.querySelector('.contenedor').querySelector('.parrafo') nos devolverá el primer elemento con la clase párrafo dentro del elemento con la clase contenedor.
Este selector devuelve una colección de elementos HTML que tendremos que iterar para poder acceder a cada uno de sus componentes. Las reglas y forma de uso son idénticas al selector anterior, y también se puede aplicar sobre el documento completo, o sobre algún elemento en concreto.
Si hacemos document.querySelectorAll('.parrafo') nos devuelve todos los elementos del documento con la clase párrafo. Pero si lo hacemos así document.querySelector('.contenedor').querySelectorAll('.parrafo') nos devolverá todos los elementos con la clase párrafo dentro del elemento con la clase contenedor.